<!-- 无感大转盘 -->
<template>
  <ele-pro-table
    ref="table"
    size="mini"
    :columns="columns"
    :datasource="datasource"
    :selection.sync="selection"
    :need-page="true"
    :hideOnSinglePage="false"
  >
    <!--头部按钮-->
    <template v-slot:toolbar>
      <div class="btn-class">
        <el-button type="danger" size="small" @click="delMoreGroup">
          删除
        </el-button>
      </div>
    </template>
    <!--发布类型-->
    <template v-slot:releaseChannel="{ row }">
      <div class="flex">
        <!--releaseChannel：1 抖音 2 视频号 3 K手*-->
        <div :class="row.releaseChannel==1?'d-cls':row.releaseChannel==3?'k-cls':'sp-cls'">{{row.releaseChannel==1 ? 'D音' : row.releaseChannel==2 ? '视频号' : 'K手' }}</div>
      </div>
    </template>
    <!--操作-->
    <template v-slot:action="{ row }">
      <div class="flex-around">
        <el-link
          type="primary"
          :underline="false"
          @click.stop="edit(row)"
        >
          编辑
        </el-link>
        <el-link
          v-if="activityList.activityType==2 || activityList.activityType==3 || activityList.activityType==5 "
          type="success"
          :underline="false"
          @click="prizeDrawer(row)"
        >
          奖品名单
        </el-link>
        <!--releaseChannel:1_D音 2:视频号 3:K手 (hint:只有快手有数据详情数据)-->
        <!--v-if="row.releaseChannel==3"-->
        <!--:disabled="row.releaseChannel==3?false:true"  _改代码需注释！！！  -->
        <el-link
          type="primary"
          :underline="false"
          :disabled="row.releaseChannel==2?true : false"
          @click.stop="dataDetail(row)"
        >
          数据详情
        </el-link>
        <el-link
          type="success"
          :underline="false"
          @click.stop="seeCode(row)"
        >
          活动二维码
        </el-link>
        <el-link
          type="danger"
          :underline="false"
          @click.stop="delSingle(row)"
        >
          删除
        </el-link>
      </div>
    </template>
    <!--    D音视频号授权二维码-->
    <scan-code ref="codeDialog" @success="codeSussess"></scan-code>
    <!--    活动二维码-->
    <agent-code :visible.sync="activityShow" ref="code" :type="2" :releaseChannel="releaseChannel"></agent-code>
    <!--编辑-->
    <edit-modal ref="edites" :visible.sync="editShow" @load="reload"></edit-modal>
    <!--奖品名单-->
    <prize-name :visible.sync="prizeShow" :id="prizeId"></prize-name>
    <!--数据详情-->
    <data-detail ref="detail" :visible.sync="detailShow" :releaseChannel="releaseChannel"></data-detail>
  </ele-pro-table>
</template>

<script>
  import scanCode from '@/views/matrixManage/releaseManage/videoId/code-img'
  import AgentCode from "@/layout/components/agent-code";
  import { areaList } from "@/api/matrixManage/groupManage";
  import editModal from '../components/edit-modal.vue'
  import prizeName from '../components/prize-name.vue'
  import dataDetail from '../components/data-detail.vue'
  import {getActivity2,deleteActivity} from "@/api/explosiveCode/releaseActivity";
  export default {
    components:{scanCode, prizeName, dataDetail, AgentCode, editModal },
    props: {
      // 表格数据
      activityList:Array | Object
    },
    data() {
      return {
        editShow:false,
        activityShow:false,
        prizeShow:false,
        detailShow:false,
        ipLocation:'',
        // 当前编辑数据
        current: null,
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            prop: 'activityName',
            label: '活动名称',
            align: 'center',
            width:209,
            showOverflowTooltip: true
          },
          /*{
            prop: 'videoMaterial',
            label: '关联创作',
            align: 'center',
            showOverflowTooltip: true
          },*/
          {
            prop: 'releaseChannel',
            label: '发布类型',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'releaseChannel',
          },
          /*{
            prop: 'playCount',
            label: '新增粉丝',
            align: 'center',
            showOverflowTooltip: true
          },*/
          {
            prop: 'viewCount',
            label: '曝光量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'likeCount',
            label: '点赞数',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'commentCount',
            label: '评论数',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            columnKey: 'action',
            width: 412,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        // 表格选中数据
        selection: [],
        // IP属地
        areaRegion:[],
        // 表单提交状态
        loading: false,
        // 表单数据
        form: {
          groupType:1
        },
        // 表单验证规则
        rules: {
          groupName: [
            {
              required: true,
              message: '请输入分组名称',
              trigger: 'blur'
            }
          ],
          ipLocation: [
            {
              required: true,
              message: '请选择IP属地',
              trigger: 'blur'
            }
          ]
        },
        // 奖品id
        prizeId:null,
        // 1:D音 2:视频号 3:K手
        releaseChannel:0
      };
    },
    created(){
      this.init()
    },
    // 路由刷新
    activated(){
      this.reload()
    },
    methods: {
      /* 刷新————表格数据源 */
      /*datasource({ page, limit, where, order }) {
        return getActivity({ ...where, ...order, page, limit,...this.activityList });
      },*/

      /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
      async datasource({ page, limit, where, order }) {
        const result = await getActivity2({ ...where, ...order, page, limit,...this.activityList});
        console.log("result============", result)
        let list = result.list
        if(list.length>0){
          let info={
            viewCount:0,
            likeCount:0,
            commentCount:0
          }
          for(let i=0;i<list.length;i++){
            console.log("list=========",list[i])
            info.viewCount += Number(list[i].viewCount) //曝光量
            info.likeCount += Number(list[i].likeCount) //点赞数
            info.commentCount += Number(list[i].commentCount) //评论数
          }
          console.log('info========',info)
          this.$emit('infoAll',info)
        }

        return result.list;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      // 奖品名单
      prizeDrawer(e){
        console.log("奖品名单",e)
        this.prizeId=e.id
        this.prizeShow=true
      },
      // 数据详情
      dataDetail(row){
        console.log('数据详情',row)
        // releaseChannel 1:D音 2:视频号 3:K手
        this.releaseChannel=row
        this.detailShow=true
        this.$nextTick(()=>{
          this.$refs['detail'].reload()
        })
      },
      /* 活动二维码 */
      seeCode(row){
        console.log("row=====",row)
        // releaseChannel 1:D音 2:视频号 3:K手
        this.releaseChannel=row.releaseChannel
        this.activityShow = true;
        // 活动二维码  :row.qrcode
        this.$nextTick(()=>{
          // 修改
          if(this.releaseChannel===2){
            // 视频号二维码
            this.$refs['codeDialog'].show()  // 视频号二维码展示
          }
          else{
            this.$refs['code'].show(row.qrcode)
          }
        })

      },
      // 选择ip属地
      ipChange(e){
        this.form.ipLocation=this.areaRegion[e].areaName
        this.form.area=this.areaRegion[e].areaCode
        console.log('选择ip属地e',e,'this.form',this.form)
      },
      init(){
        //获取IP属地
        areaList('')
          .then((data) => {
            this.areaRegion=data.data
            console.log(' 获取IP属地--', this.areaRegion)
          })
      },

      // 删除
      delMoreGroup(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }
        var ids=this.selection.map(item => {
          return item.id
        })
        console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
        this.delGroups(ids)
      },
      /* 编辑 */
      edit (row) {
        console.log("点击编辑row22222======",row)
        //跳转 “发布活动” 路由
        // this.current = row;  // 表格的行数据赋值给 current
        // this.$router.push({path:'/explosiveCode/releaseActivity',query:{row:row}});
        this.editShow=true
        this.$nextTick(()=>{
          this.$refs['edites'].show(row)
        })
      },
      /* 授权链接 */
      authorizationLink(form) {
        // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
        if(this.current) {
          Object.assign(this.current, form);
        }
      },
      /* 删除 */
      delSingle(row) {
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delGroups(ids)
      },
      delGroups(ids){
        this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteActivity({
            ids:ids
          })
            .then((data) => {
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      }
    }
  };
</script>

<style scoped lang="less">

  /*表格头部按钮*/
  .btn-class{
    margin: 10px 0;
    .el-button{
      padding: 0;
      width: 94px;
      border-radius: 2px;
      height: 33px;
    }
  }

  /*D音，K手，视频号class*/
  .d-cls,.k-cls,.sp-cls{
    width: 56px;
    height: 25px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .d-cls{
    color: #0C91F3;
    background-color: #DAEFFF;
  }
  .k-cls{
    color: #FFA800;
    background-color: #FFEBE0;
  }
  .sp-cls{
    color: #60c130;
    background-color: #f0f9eb;
  }

  /*IP属地背景*/
  .ip-bj{
    background: #DDF0FF;
    border-radius: 2px;
    height: 25px;
    line-height: 25px;
    color: #1E6CEB;
    padding:0 8px;
    display: inline-block;
  }
</style>
